<template>
  <div id="music">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="main">
      <div class="first">
      	<p>一 GCC联手海峡两岸 一</p>
      	<h3>粤港澳大湾区音乐节</h3>
      	<p>明星：汪明荃、平安、杨品骅、李雨儿</p>
      	<p>中国国家交响乐歌唱家：孙笑盈</p>
      	<p>旅英高男高音歌唱家：李梅里</p>
      </div>
      <div class="two">
      	<h3>参与活动免费获门票</h3>
      	<p>活动时间：2019年10月13日10:00 - 10月22日24:00（达到标准的用户需联系客服，票数有限送完为止）</p>
      	<p><label>1.购买GCC赠送门票：</label><span><i>购买1000-4999元可获得1张</i><i>购买5000-7999元可获得2张</i><i>购买8000元以上可获得3张</i><i>购买≥ 2万元可以直接获得VIP票两张</i></span></p>
      	<h5>2.邀请注册、入金享门票：</h5>
      	<p>邀请3人开户，赠送1张。被邀请人总入金达5000元，邀请人再获得1张。</p>
      	<p>邀请6人开户，赠送2张。被邀请人总入金达10000元，邀请人再获得2张。</p>
      	<p>邀请9人开户，赠送3张。被邀请人总入金达15000元，邀请人再获得3张。</p>
      	<h5>3.集赞得门票：</h5>
      	<p>注册GCC，并在活动页面生成海报截图，分享至朋友圈集齐88个赞，获得门票一张。</p>
      	<p>注:满足以上其中一条，请添加客服微信:GameContinent001kf领取您的门票</p>
      	<a href="jvascript:;" @click="goPoster()">生成分享海报</a>
      	<p class="cente">10月26日 晚上19:30-21:30 福田区体育公园体育馆</p>
      	<p class="cente">中共中央统战部、国务院台办、民革中央联合举办</p>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      code: "",
      loginToken:''
    };
  },
  created() {
    this.changeTitle("演唱会活动详情页");
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    goPoster(){
    	Services.getUser({
	      token: this.loginToken,
	      lang: localStorage.getItem("language")
	    }).then(res => {
	      if (res.code == "0000") {
    			this.$router.push(`/musicPoster?music=1&code=${res.user.referrerCode}`);
	      } else {
	        Toast(res.msg);
	        localStorage.removeItem("token");
	        localStorage.removeItem("userObj");
	        localStorage.setItem("loginBack", true);
	        this.$router.push(`/login`);
	      }
	    });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#music {
	width: 100%;
	padding-top: .88rem;
  .main{
	background: url("~@/assets/img/music/bg1.png") no-repeat center / 100% 100%;
	width: 100%;
	height: 17rem;
	padding: 4.44rem .62rem 0;
	box-sizing: border-box;
	>div{
		color: #f7b101;
		text-align: center;
		font-size: .18rem;
		h3{
			font-size: .42rem;
		    letter-spacing: .1rem;
		    margin-bottom: .14rem;
		}
		h5{
			text-align: left;
				font-size: .24rem;
				padding-top: .1rem;
		}
		p{
			letter-spacing: .04rem;
			margin-bottom: .02rem;
			display: flex;
			justify-content: flex-start;
			text-align: left;
			label{
				width: 2.9rem;
				font-size: .24rem;
			}
			span{
				text-align: left;
				flex: 1;
				i{
					display: block;
		    	letter-spacing: .02rem;
				}
			}
		}
		a{
			width: 3.64rem;
			height: .76rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .38rem;
			margin: .2rem auto;
			letter-spacing: .1rem;
			background: url("~@/assets/img/music/btn.png") no-repeat center / 100% 100%;
		}
		&.first{
			margin-bottom: .36rem;
			p{
				justify-content: center;
				&:first-child{
					font-size: .32rem;
					letter-spacing: .06rem;
				}	
			}
		}
		&.two{
			p.cente{
				text-align: center;
				justify-content: center;
			}
		}
	}
  }
}
</style>